<template>
		<view class="flex-col page">
		  <view class="flex-col section space-y-26">
		    <image
		      class="self-end image"
		      src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/648fef445a7e3f0310275929/648ff5ec726ab50011f26fbc/7b478abcd0bb9aa93a22154241a68dc4.png"
		    />
		    <view class="flex-col space-y-40">
		      <view class="flex-row justify-center items-center relative group">
		        <image
				@click="ToBack()"
		          class="image_2 pos"
		          src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/648fef445a7e3f0310275929/648ff5ec726ab50011f26fbc/16872661801695767756.png"
		        />
		        <text class="text">会员积分</text>
		      </view>
			 
			  <!-- 搜索框 -->
			  <view class="flex-row items-center group space-x-16">
			    <view class="flex-row justify-between items-center flex-auto search">
			      <input class="text" type="text" v-model="searchText" placeholder="请输入搜索关键字">
			      <image
					@click="search"
			        class="image_2"
			        src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/648fef445a7e3f0310275929/648ff5ec726ab50011f26fbc/16873474154809259167.png"
			      />
			    </view>
			    <image
			      class="shrink-0 image_2 image_3"
			      src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/648fef445a7e3f0310275929/648ff5ec726ab50011f26fbc/16873474154838255055.png"
			    />
			  </view>
		      <text class="self-start text_2">共{{totalItems}}条记录</text>
		    </view>
		  </view>
		  <view class="flex-col relative section_2 space-y-14" >
		    <text class="self-start text_3">积分收支明细</text>
		    <view class="flex-col group_2"  v-for="record in filteredList" :key="record.id">
		      <view class="flex-row justify-between items-center group_3">
		        <view class="flex-col items-start space-y-10">
		          <text class="font_1">{{ record.description }}</text>
		          <text class="font_3">{{ record.changeTime }}</text>
		        </view>
		        <text class="font_2">{{ record.point }}</text>
		      </view>
		    </view>
		  </view>
		</view>
	
</template>

<script>
	import {
			searchRecord
		} from '../../api/index.js'//引入会员详情查询接口
	export default {
	  data() {
	    return {
	      searchText: '',
	      currentPage: 1,
	      pageSize: 15,
	      totalItems: 0,
		  totalPages:0,
	      // recordList: [ // 假设记录列表为一个数组，每个项包含id、name、date和description属性
	      //   { id: 1, name: '记录1', date: '2021-01-01', description: '这是记录1的描述' },
	      //   { id: 2, name: '记录2', date: '2021-01-02', description: '这是记录2的描述' },
	      //   { id: 3, name: '记录3', date: '2021-01-03', description: '这是记录3的描述' },
	      //   // ...
	      // ]
		  recordList: [{
		  			"changeMode": "SIGN_IN",
		  			"changeTime": "2023-06-08 22:10:28",
		  			"changeType": "SEND",
		  			"description": "每日签到奖励",
		  			"id": "2023060800000002",
		  			"point": 10,
		  			"traceId": "230608kvStG3Cj3J"
		  		}, {
		  			"changeMode": "ACTIVITY_GIFT",
		  			"changeTime": "2023-03-29 10:57:02",
		  			"changeType": "SEND",
		  			"description": "调查问卷赠送积分",
		  			"id": "2023032900000001",
		  			"point": 111,
		  			"traceId": "7A202303290000000200000054"
		  		},  {
		  			"changeMode": "POINTORDER",
		  			"changeTime": "2023-03-24 17:14:36",
		  			"changeType": "DEDUCT",
		  			"description": "积分商城,兑换商品|960000002893230324",
		  			"id": "2023032400000052",
		  			"point": 1,
		  			"traceId": "960000002893230324"
		  		}]
	    };
	  },
	  computed: {
	    filteredList() {
	      // 根据搜索关键字过滤记录列表
	      return this.recordList.filter(record =>
	        record.description.toLowerCase().includes(this.searchText.toLowerCase())
	      );
	    },
	    // totalPages() {
	    //   // 计算总页数
	    //   return Math.ceil(this.filteredList.length / this.pageSize);
	    // }
	  },
	  methods: {
	    search() {
	      // 执行搜索操作，重置当前页码为第一页
	      this.currentPage = 1;
		  console.log(this.searchText)
		 
	    },
		ToBack(){
			
			uni.navigateBack({
			    delta: 1
			})
		
			
		},
	    prevPage() {
	      // 上一页
	      this.currentPage--;
		  console.log(this.currentPage)
	    },
	    nextPage() {
	      // 下一页
	      this.currentPage++;
		   console.log(this.currentPage)
	    },
			searchRecord() {
				const memberId=uni.getStorageSync('memberId');
				searchRecord({
							"memberId":memberId ,
							"page": this.currentPage,
							"pageSize": 100
						}).then(res=>{
							console.log(res.data.data.items);
							console.log("ok")
							this.recordList=res.data.data.items
							this.totalItems=res.data.data.total
							this.totalPages=res.data.data.pageCount
							})
						.catch(res => {
							console.log('no'+typeof(memberId))
							})
			},
			onShow() {
				this.searchRecord()
				}
		
	  },
	  
	};
</script>

<style lang="scss">
.page {
  background-color: #f2f2f2;
  height: 100%;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  .section {
    padding: 32rpx 24rpx 324rpx;
    background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/648fef445a7e3f0310275929/648ff5ec726ab50011f26fbc/16872661801606233166.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    .image {
      margin-right: 12rpx;
      width: 48rpx;
      height: 23rpx;
    }
    .space-y-40 {
      & > view:not(:first-child),
      & > text:not(:first-child),
      & > image:not(:first-child) {
        margin-top: 80rpx;
      }
      .group {
        padding: 8rpx 0;
        .image_2 {
          width: 48rpx;
          height: 48rpx;
        }
        .pos {
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
        }
        .text {
          color: #ffffff;
          font-size: 34rpx;
          font-family: PingFang SC Bold;
          font-weight: 700;
          line-height: 31rpx;
          opacity: 0.9;
        }
      }
      .text_2 {
        margin-left: 12rpx;
        color: #ffffff;
        font-size: 25rpx;
        font-family: PingFang SC Bold;
        font-weight: 300;
        line-height: 30rpx;
      }
    }
  }
  .space-y-26 {
    & > view:not(:first-child),
    & > text:not(:first-child),
    & > image:not(:first-child) {
      margin-top: 52rpx;
    }
  }
  .section_2 {
    margin-top: -264rpx;
    padding: 48rpx 28rpx 340rpx 32rpx;
    background-color: #ffffff;
    border-radius: 32rpx 32rpx 0px 0px;
    .text_3 {
      color: #333333;
      font-size: 32rpx;
      font-family: PingFang SC Medium;
      line-height: 30rpx;
    }
    .group_2 {
      border-bottom: solid 2rpx #eeeeee;
      .group_3 {
        padding: 28rpx 0;
        border-bottom: solid 2rpx #eeeeee;
      }
      .group_4 {
        padding: 28rpx 0;
      }
      .space-y-10 {
        & > view:not(:first-child),
        & > text:not(:first-child),
        & > image:not(:first-child) {
          margin-top: 20rpx;
        }
        .font_1 {
          font-size: 28rpx;
          font-family: PingFang SC Medium;
          line-height: 26rpx;
          color: #333333;
        }
        .font_3 {
          font-size: 24rpx;
          font-family: PingFang SC Regular;
          line-height: 18rpx;
          color: #999999;
        }
      }
      .font_2 {
        font-size: 28rpx;
        font-family: PingFang SC Medium;
        line-height: 20rpx;
        color: #333333;
      }
    }
  }
  .space-y-14 {
    & > view:not(:first-child),
    & > text:not(:first-child),
    & > image:not(:first-child) {
      margin-top: 28rpx;
    }
  }
  //搜索框
  .group {
    padding: 0 48rpx;
    .search {
      padding: 16rpx 32rpx;
      background-color: #ffaa00;
      border-radius: 424rpx;
      height: 64rpx;
      .text {
        color: #666666;
        font-size: 28rpx;
        font-family: SourceHanSansCN;
        line-height: 20rpx;
      }
    }
    .image_2 {
      width: 32rpx;
      height: 32rpx;
    }
    .image_3 {
      margin-right: 8rpx;
    }
  }
  .space-x-16 {
    & > view:not(:first-child),
    & > text:not(:first-child),
    & > image:not(:first-child) {
      margin-left: 32rpx;
    }
  }
}
</style>